논리연산자 (Logical Operator)
or(||), and(&&)와 같은 논리연산자는 프로그래밍을 처음 배울때 변수 할당 다음으로 배웠던 기억이 있다.
그럼 이제와서야 연산자를 "굳이" 다시 정리하는 이유는 무엇일까?
그이유는 널 병합 연산자(Nullish coalescing operator)를 알게 됨에 따라 한번쯤은 명확하게 정리하고 가야겠다는 생각이 들어서이다.
1. OR (||)
주변에도 물어봤었지만 OR 연산자의 결과값을 직접적으로 찍어본 분들이 많이 없는 것 같았다.
나도 이번에 널 병합 연산자를 알게되어 찾아보던 도중 찍어보았으니 말이다.
우선 javascript 에서의 OR 연산자는 단순히 boolean 만을 리턴하지 않는다.
Javascript에서 OR 연산은 아래의 순서에 따라 Truthy한 값을 찾아서 리턴하는 연산이다.
- 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다.
- 각 피연산자를 불린형으로 변환합니다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다.
- 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환합니다.
console.log(10 || 20) // 10console.log(30 || 20) // 30console.log(false || true) // trueconsole.log(true || false) // true2. AND (&&)
and 연산도 OR 연산과 유사하지만 조금은 다르다.
boolean값을 리턴하는 것이 아닌 "값"을 리턴하고 OR와는 달리 Falsy한 값을 찾아 리턴한다.
- 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다.
- 각 피연산자는 불린형으로 변환됩니다. 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다.
- 피연산자 모두가 평가되는 경우(모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자가 반환됩니다.
console.log(10 && 20) // 20console.log(30 && 20) // 20console.log(false && true) // falseconsole.log(true && false) // false3. Nullish Coalescing Operator (??)
null 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있습니다.
언뜻보면 OR 연산과 유사해 보이지만 큰차이점을 가지고 있습니다.
- || 는 첫 번째 truthy 값을 반환합니다.
- ?? 는 첫 번째 정의된(defined) 값을 반환합니다.
height = height ?? 100;위와 같은 코드가 실행될 경우 height 값이 할당되어 있지 않았을 경우 height 에는 100이라는 값이 할당된다.
let height = 0;alert(height || 100); // 100alert(height ?? 100); // 0이러한 점에서 OR 연산과는 차이를 보이는 것이다.
마지막으로
끝으로 ?? 연산은 우선순위가 생각보다 낮으며, 대부분의 연산보다 나중에 연산되고 =, ?보다는 먼저 연산된다. 추가적으로 ?? 연산은 안전성 문제로 인해 &&나 || 연산과는 같이 사용이 불가하니 사용에 주의해야할 것 같다.